import React, { memo, Suspense, useEffect, useState } from "react";
import { useHistory } from "react-router-dom";
import { renderRoutes } from "react-router-config";
import { useSelector, shallowEqual } from "react-redux";

import routes from "./router";

// 引入底部路由
import Control from "./components/control";

export default memo(function App() {
  const [isShow, setIsShow] = useState(true);

  const history = useHistory();
  const { userInfo } = useSelector(
    (state) => ({
      userInfo: state.getIn(["user", "userInfo"]),
    }),
    shallowEqual
  );
  useEffect(() => {
    if (JSON.stringify(userInfo) === "{}") {
      history.replace("/login");
    }
  }, [userInfo, history]);
  useEffect(() => {
    window.addEventListener("hashchange", (e) => {
      if (
        window.location.hash === "#/update-profile" ||
        window.location.hash === "#/search" ||
        window.location.hash === "#/other_user"
      ) {
        setIsShow(false);
        return;
      } else {
        setIsShow(true);
      }
    });
  });
  return (
    <div>
      <Suspense fallback={<div>Loading..</div>}>
        {renderRoutes(routes)}
      </Suspense>
      {userInfo.isLogin && isShow && <Control />}
    </div>
  );
});
